<template>

	<view>

		<!-- 关注"前端组件开发"公众号，可申请加入前端技术交流群 -->
		<view class="cateBox">
			<!-- 左侧列表 -->
			<scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>
				<view class="cate-left-list" v-for="(item,index) in adata" :key="index"
					@click="tapselect(index,item.id)">
					<!-- activeItem为选中状态 -->
					<view class="cate-left-item " :class="{activeItem:currentTab==index}">
						<label></label><text>{{item.name}}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 右侧列表 -->
			<scroll-view ref="rightScrollV" class="cate-right" scroll-y="true" @scroll="mainScroll"
				:scroll-into-view="'cate-'+mainCur" scroll-with-animation>
				<view v-for="(item,index) in data[0]">
					<view class="cate-right-title" @click="$utils.navigateTo('index/NationList',{ id: item.id })">
						<view style="font-weight: bold;font-size: 16px;display: flex; align-items: center;">
							<image style="width: 25px;height: 25px;margin-right: 8px;"
								:src="item.logo || '/static/detail/detail_zy.png'" mode="">{{item.title}}
						</view>
					</view>
					<view class="cate-right-title2">
						<view>{{item.address}}</view>
					</view>
					<view class="cate-right-title2">
						<view style="display: flex;align-items: center;">
							<image style="width: 14px;height: 14px;margin-right: 5px;"
								src="../../../../static/pnone.png" mode="">
							</image>{{item.phone}}
						</view>
						<view style="display: flex;align-items: center;">
							<image style="width: 14px;height: 14px;margin-right: 5px;"
								src="../../../../static/time1.png" mode=""></image>
							{{item.date_time}}
						</view>
					</view>
					<view class="cate-right-list"
						style="margin-top:1%;border-bottom: 1px solid #eeeeee;padding-bottom: 8%;">
						<view style="display: flex; 0;overflow-x: auto;">


							<view class="cate-right-item" v-for="(child,childindex) in item.good_list" :key="childindex"
								@click="$utils.navigateTo('goods/view',{ id: item.id })">
								<image :src="child.photo" mode=""></image>
								<text>{{child.title}}</text>
								<view style="color: #ff0000;font-size: 26rpx;width: 50%;margin: auto;">
									￥{{child.price}}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view style="height: 260px;"></view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {

			// data: {
			// 	type: Object,

			// }


		},
		data() {
			return {
				adata: [],
				data: {},
				currentTab: 0,
				mainCur: 0,
				verticalNavTop: 0,
				list: [{}],

			}
		},
		mounted() {
			// this.getHeight();
			this.getdata();
			console.log(this.data, 'data')
		},
		methods: {
			getdata(id) {
				this.$http.getStoreAll({
					city_id: id
				}).then(res => {

					this.adata = res.data.city_list
					console.log(res.data.store_list, 'res.data.city_list')
					this.data[0] = res.data.store_list
				}).catch(err => {

				});
			},
			itemClick(item) {

				this.$emit('itemClick', item)

			},
			//点击左侧按钮
			tapselect(index, id) {


				// // 左边侧边栏点击了
				this.currentTab = index;
				this.getdata(id);
				// // 设置右边滑动
				// this.mainCur = index;
				//    this.verticalNavTop = (index - 1) * 50;

			},
			//右侧滚动
			mainScroll(e) {
				console.log("在滑动");
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {

						console.log("执行了里面在滑动");

						this.currentTab = i;
						// this.mainCur = i;
						this.verticalNavTop = (i - 1) * 50
						return true


					}
				}
			},
			//获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
			getHeight() {
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for (let i = 0; i < this.data.length; i++) {
					let view = uni.createSelectorQuery().select("#cate-" + i)

					// #ifdef  MP-WEIXIN
					view = uni.createSelectorQuery().in(this).select("#cate-" + i);
					//	#endif


					view.fields({
						size: true
					}, data => {
						top = temp;
						bottom = temp + data.height;
						this.list[i] = {
							top: top,
							bottom: bottom
						};
						temp = bottom;
					}).exec();
				}

			}
		}


	}
</script>

<style>
	.cate-right-item text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.cateBox {
		position: absolute;
		top: 0;
		bottom: 0;
		background: #fff;
		width: 100%;
		display: flex;
	}

	.cate-left {
		width: 25%;
		background: #f4f4f4;
		height: 100%;
	}

	.cate-left-item {
		background: #f4f4f4;
		height: 50px;
		display: flex;
		align-items: center;
	}

	.cate-left-item.activeItem {
		background: #fff;
	}

	/* 
 */

	.cate-left-item label {
		width: 4rpx;
		height: 15px;
		float: left;
		background: #f4f4f4;
	}

	.cate-left-item.activeItem label {
		background: #0bbbef;
	}

	.cate-left-item text {
		width: 196rpx;
		font-size: 28rpx;
		display: block;
		text-align: center;
	}

	/* 右侧*/
	.cate-right {
		width: 75%;
	}

	.cate-right-title {
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 60rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
	}

	.cate-right-title2 {
		font-size: 24rpx;
		/* margin-top: 20rpx; */
		color: #999;
		position: relative;
		margin-top: 16rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
	}

	.cate-right-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: orange;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-right-title text {
		background: #fff;
		padding: 0 10px;
		position: relative;
		color: #000;
		font-weight: bold;
	}

	.cate-right-list {
		height: auto;
		overflow: hidden;
	}

	.cate-right-item {
		width: 45%;
		float: left;
		margin-top: 20rpx;
	}

	.cate-right-item image {
		width: 200rpx;
		height: 160rpx;

		display: block;
		border: 1px solid #ddd;
		border-radius: 14px;
		margin: 0 auto;
		box-shadow: 0 0 7px 1px #ddd;
	}

	.cate-right-item text {
		display: block;
		text-align: center;
		font-size: 24rpx;
		width: 50%;
		margin: 2% auto;
	}
</style>